<!DOCTYPE html>
<html>

<head>
    <title>jQuery UI Month Picker Plugin</title>
    <meta name="description" content="jQuery UI Month Picker Plugin : jQuery UI Month Picker Plugin">

    <link href="stylesheets/stylesheet.css" rel="stylesheet" type="text/css" />
    <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

    <link href="MonthPicker.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="examples.css" />

    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdn.rawgit.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js"></script>

    <script src="MonthPicker.min.js"></script>
    <script src="examples.js"></script>
</head>

<body>

    <!-- HEADER -->
    <div id="header_wrap" class="outer">
        <header class="inner">
            <a id="forkme_banner" href="https://github.com/KidSysco/jquery-ui-month-picker">View on GitHub</a>

            <h1 id="project_title">jQuery UI Month Picker Plugin</h1>
            <h2 id="project_tagline">Picking only Months and Years with jQuery UI!</h2>

            <section id="downloads">
                <a class="zip_download_link" href="https://github.com/KidSysco/jquery-ui-month-picker/zipball/master">Download this project as a .zip file</a>
                <a class="tar_download_link" href="https://github.com/KidSysco/jquery-ui-month-picker/tarball/master">Download this project as a tar.gz file</a>
            </section>
        </header>
    </div>

    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">
        <section id="main_content" class="inner">

            <h3><a id="about" class="anchor" href="#about" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>About</h3>

            <p>The jQuery UI Month Picker Plugin is designed to allow user input for only a month and year when only that input
                is required. Clicking on the year, allows the user to jump ahead or back 12 years at a time. Clicking anywhere
                on the page, except on the month picker menu itself, will cause the month picker to hide. The Month Picker
                has lots of options for date validation, setting the start year, using an icon button, input masking, internationalization,
                localization and more.</p>
            <p>
                <a href="https://travis-ci.org/KidSysco/jquery-ui-month-picker">
                    <img src="https://travis-ci.org/KidSysco/jquery-ui-month-picker.svg?branch=master" alt="Travis CI" />
                </a>

                <a href="https://github.com/KidSysco/jquery-ui-month-picker/wiki#installation">
                    <img src="https://img.shields.io/bower/v/jquery-ui-month-picker.svg">
                </a>

                <a href="http://gruntjs.com/" target="_blank">
                    <img src="https://cdn.gruntjs.com/builtwith.png" alt="Built with Grunt" />
                </a>
            </p>

            <h3>Default functionality</h3>
            <p>
                This demonstrates the plugin's default functionality.
                <br />
                <br />Choose a Month:
                <input id="IconDemo" class='Default' type="text" />
            </p>

            <h3>Button Demonstration</h3>
            <p>
                This demonstrates how you can customize every aspect of the open button. See the <a href='https://github.com/KidSysco/jquery-ui-month-picker/wiki/Button-Option'>Button documenation</a> for details on handeling internationalization.
                <br />
                <br />No button:
                <br />
                <input id="NoIconDemo" type="text" />
                <br />
                <br />Image button:
                <br />
                <input id="ImageButton" type="text" />
                <br />
                <br />Plain HTML button:
                <br />
                <input id="PlainButton" type="text" />
                <br />
                <br />jQuery UI button:
                <br />
                <input id="JQButton" type="text" />
            </p>

            <h3>MinMonth and MaxMonth Demonstration</h3>
            <p>
                This demonstrates how you can limit the user to chooseing months within a given interval.
                <br />
                <br />Future months only:
                <br />
                <input id="FutureDateDemo" type="text" />
                <br />
                <br />Past months only:
                <br />
                <input id="PastDateDemo" type="text" />
                <br />
                <br />18 months from today:
                <br />
                <input id="YearAndAHalfDeom" type="text" />
            </p>

            <h3>Start Year Demonstration</h3>
            <p>
                This demonstrates how the plugin will default to the year specified in the text box. Changing the year in
                the text box will result in a new default year for the chooser and if no date is selected then the default
                year is the current year.
                <br />
                <br />Choose a month:
                <input id="StartYearDemo" class='Default' type="text" value="01/2025" />
            </p>

            <h3>Override Start Year Demonstration</h3>
            <p>
                This demonstrates how the MonthPicker can be configured to override the start year default behavior. This
                MonthPicker will start on 2023 no matter which date is currently selected, even if no date is specified.
                <br />
                <br />Choose a month:
                <input id="OverrideStartYear" type="text" />
            </p>

            <h3>Get Month/Year & Validation API Demonstration</h3>
            <p>
                This demonstrates API usage for the GetSelectedMonthYear(), GetSelectedYear() and GetSelectedMonth() function
                calls which will also perform date validation. Clear() will clear the text field and any validation messages.
                <br />
                <br />Choose a month:
                <input id="GetYearDemo" class="GetYearDemo" type="text" value="02/2012" />
                <br />
                <br />
                <button type="button" onclick="alert($('.GetYearDemo').MonthPicker('GetSelectedYear'));">Get Year</button>
                <button type="button" onclick="alert($('#GetYearDemo').MonthPicker('GetSelectedMonth'));">Get Month</button>
                <button type="button" onclick="alert($('#GetYearDemo').MonthPicker('GetSelectedMonthYear'));">Get Month and Year</button>
                <button type="button" onclick="$('#GetYearDemo').MonthPicker('Clear');">Clear</button>
            </p>

            <h3>Disable/Enable API Demonstration</h3>
            <p>
                This demonstrates API usage for the Enable() and Disable().
                <br />
                <br />Choose a month:
                <input id="EnableDisableDemo" class="Default" type="text" value="12/2009" />
                <br />
                <button type="button" onclick="$('#EnableDisableDemo').MonthPicker('option', 'Disabled', true);">Disable</button>
                <button type="button" onclick="$('#EnableDisableDemo').MonthPicker('option', 'Disabled', false);">Enable</button>
            </p>

            <h3>Digital Bush Integration Demonstration</h3>
            <p>
                This demonstrates how the MonthPicker plugin integrates with the <a href="http://digitalbush.com/" target="_blank">Digital Bush Plugin for Input Masking</a>                as well as the html 5 placeholder attribute to simulate watermarking. Try to type an invalid date and try
                the Get Month/Year button to fire off validation.
                <br />
                <br />Type in a month/year:
                <br />
                <input id="DigitalBush" type="text" class="digital-bush" />
                <br />
                <br />Type in a month/year:
                <br />
                <input id="DigitalBushBoth" type="text" class="digital-bush" placeholder="mm/yyyy" />
                <br />
                <br />
                <button type="button" onclick="$('.digital-bush').MonthPicker('Clear');">Clear All</button>
                <button type="button" onclick="alert($('#DigitalBushBoth').MonthPicker('GetSelectedMonthYear'));">Get Month/Year</button>
            </p>

            <h3>Month Format Demonstration</h3>
            <p>
                This demonstrates how you can display month feedback in a variety of ways. Choose a month format from the
                dropdown, then click on the input and select a month to see it in that format.
                <br />
                <br /> Date:
                <input type="text" id="MonthFormat" class='Default' value='12/2015' style='width:150px;'>
                <br />
                <br /> Format:
                <select id="FormatSelect">
                    <option value="mm/yy">Default - mm/yy</option>
                    <option value="yy-mm">ISO 8601 - yy-mm</option>
                    <option value="M, y">Short - M, y</option>
                    <option value="MM, y">Medium - MM, y</option>
                    <option value="mm MM, yy">Full - mm MM, yy</option>
                    <option value="MM &apos;in the year&apos; yy">With text - MM 'in the year' yy</option>
                </select>
            </p>
            
            <h3>Alternate Field/Format Demonstration</h3>
            <p>
                This demonstrates how the <a href='https://github.com/KidSysco/jquery-ui-month-picker/wiki/AltField-Option' target="_blank">AltField</a> and 
                <a href='https://github.com/KidSysco/jquery-ui-month-picker/wiki/AltFormat-Option' target="_blank">AltFormat</a> options work so that values shown to the user can be different than what is submitted to the server.
            <table style="margin-top: -25px;">
            <tr>
                <td>Value shown to user:</td>
                <td>&nbsp; &nbsp; </td>
                <td>Unix Date value sent to server:</td>
            </tr>
            <tr>
                <td><input id="AltMonthField" style='width:100px;' /></td>
                <td>&nbsp; &nbsp; </td>
                <td><input name='selectedMonth' id="serverValue" />
                    <!-- This could be a hidden input, I made it a text so you cen see what gets sent to the server -->
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Value shown to user:</td>
                <td>&nbsp; &nbsp; </td>
                <td>ODBC Date value sent to server:</td>
            </tr>
            <tr>
                <td><input id="AltMonthField2" style='width:100px;' /></td>
                <td>&nbsp; &nbsp; </td>
                <td><input name='selectedMonth2' id="serverValue2" />
                    <!-- This could be a hidden input, I made it a text so you cen see what gets sent to the server -->
                </td>
            </tr>
            </table>
            </p>

            <h3>jQuery UI Dialog Integration Demonstration</h3>
            <p>
                This demonstrates the Month Picker running inside of the jQuery UI Modal Dialog.
                <br />
                <br />
                <button type="button" id="LaunchDialog" onclick="$('#Modal').dialog('open');">Launch Dialog</button>
            </p>
            
            <h3>Inline Menu Demonstration</h3>
            <p>
                This demonstrates the Month Picker menu inlined in a div tag.
                <div id='InlineMenu'></div>
            </p>

            <h3>HTML 5 Month Input Type Support</h3>
            <p>
                This demonstrates how the MonthPicker will work with the HTML 5 Month Input Type. View this section using
                Chrome to see Google's latest implementation in comparison.
                <br />
                <br /> Jquery UI Month Picker:
                <input id="Html5" type="month" class="" />
                <br />
                <br /> Chrome Month Picker:
                <input id="ChromeMonthPicker" type="month" class="" />
            </p>

            <h3>.position() Integration Demonstration</h3>
            <p>
                <br />This demonstrates the Month Picker integration with the optional .position() plugin. The menu should show on top of the input
                rather than below where the view would be obstructed.
                <br />
                <br />Choose a month:
                <input id="PositionDemo" type="text" value="02/2012" />
            </p>
        </section>
    </div>



    <div id="Modal">Test:
        <input id="DialogDemo" class='Default' type="text" />
    </div>
</body>
</html>
